<template>
  <div>
    <!-- $router.back()：返回上一页 -->
    <van-nav-bar title="精彩评论" left-arrow @click-left="$router.back()" />

    <div class="comment-list">
      <!-- 遍历10条假数据 -->
      <div class="item" v-for="item in commentList" :key="item.id">
        <div class="head">
          <img :src="item.user.head_img | avatarFilter" alt />
          <div>
            <!-- 用户昵称 -->
            <p>{{ item.user.nickname }}</p>
            <!-- 评论时间 -->
            <span>{{ item.create_date | dateFilter }}</span>
          </div>
          <!-- 绑定回复点击事件 -->
          <span @click="replyComment(item.id)">回复</span>
        </div>
        <!-- 回复某条评论 -->
        <!-- item.parent指向的是当前评论回复的评论 -->
        <nested-comment
          v-if="item.parent"
          :comment="item.parent"
        ></nested-comment>
        <!-- 评论内容 -->
        <div class="text">{{ item.content }}</div>
      </div>
    </div>
    <!-- 可以获取bar里面所有的方法 -->
    <bottom-comment-bar
    @handle='innerReply'
      ref="bottomCommentComponent"
      @update="loadCommentList"
      :comment-length="commentList.length"
    ></bottom-comment-bar>
  </div>
</template>

<script>
// 引用底栏组件
import BottomCommentBar from "../components/bottom-comment-bar.vue";
// 引用获取评论列表接口
import { getCommentList } from "../api/news.js";
// 引用嵌套评论组件
import NestedComment from "../components/nested-comment.vue";
export default {
  components: {
    "bottom-comment-bar": BottomCommentBar,
    "nested-comment": NestedComment,
  },
  created() {
    // 更新回复评论列表
    this.loadCommentList();
  },
  data() {
    return {
      // 评论列表
      commentList: [],
    };
  },
  methods: {
    // 获取评论列表
    loadCommentList() {
      getCommentList(this.$route.params.id).then((res) => {
        this.commentList = res.data.data;
        // console.log(res.data.data);
      });
    },
    replyComment(commentId) {
      // 调用底部评论组件的展开多行文本的方法
      // console.log('评论id',commentId);
      // 获取组件实例/获取dom元素 调用bottom-comment-bar组件的方法
      this.$refs.bottomCommentComponent.handlerFocus(commentId);
    },
    innerReply(commentId) {
      // console.log(commentId);
      this.$refs.bottomCommentComponent.handlerFocus(commentId);
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
  color: #333;
}

.item {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > img {
      width: (50/360) * 100vw;
      height: (50/360) * 100vw;
      display: block;
      border-radius: 50%;
    }
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      > span {
        font-size: 12px;
        color: #999;
        line-height: 25px;
      }
    }
    > span {
      color: #999;
      font-size: 13px;
    }
  }
  .text {
    font-size: 14px;
    color: #333;
    padding: 20px 0 10px 0;
  }
}

.comment-list {
  padding: 8px;
}

.van-nav-bar {
  border-bottom: 1px solid #999;
}
</style>